<template>
  <div class="main">
    <!-- 1.0 顶部头像部分 -->
    <div class="top">
      <img
        v-if="commentData.user.head_img"
        class="avator"
        :src="$baseURL + commentData.user.head_img"
        alt=""
      >
      <img
        v-else
        class="avator"
        src="@/assets/logo.png"
        alt=""
      >
      <div class="info">
        <div class="nickname">{{ commentData.user.nickname }}</div>
        <div class="create_date">{{ commentData.create_date.slice(0,10) }}</div>
      </div>
      <span
        class="reply"
        @click="replyHandle"
      >回复</span>
    </div>
    <!-- 2.0 父评论的组件调用 -->
    <CommentParent
      v-if="commentData.parent"
      :parentData="commentData.parent"
    />
    <!-- 3.0 主评论 -->
    <p class="content">{{ commentData.content }}</p>
  </div>
</template>

<script>
// 导入事件总线
import Bus from "@/utils/Bus.js";
import CommentParent from "@/components/Comment/Parent.vue";
export default {
  components: {
    CommentParent,
  },
  props: ["commentData"],
  methods: {
    replyHandle() {
      // 点击回复的时候，触发事件总线中注册的 sendComment 事件
      Bus.$emit("sendComment", this.commentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  .top {
    display: flex;
    .avator {
      width: 25px;
      height: 25px;
      object-fit: cover;
      margin-right: 5px;
      border: 1px solid #cccc;
      border-radius: 50%;
    }
    .info {
      flex: 1;
      .nickname {
        font-size: 14px;
      }
      .create_date {
        margin-top: 3px;
        font-size: 12px;
        color: #ccc;
      }
    }
    .reply {
      color: #999;
      font-size: 13px;
    }
  }
  .content {
    margin-top: 5px;
    line-height: 1.4;
  }
}
</style>